<template>
  <panel title="进线柜功率">
    <div class="ml20 mr20">
      <x-row v-if="show">
        <x-col :span="24">
          <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
import store from 'src/store' // vuex store instance
import filters from 'filters'

export default {
  name: 'power',

  data () {
    return {
      show: false,
      chartWidth: '400px',
      chartHeight: '230px',
      floorDatasDefault: {
        '1475867550id': 0, // 1栋第一个
        '1475861648id': 0, // 1栋第二个
        '2栋配电房': 0,
        '3栋配电房': 0,
        '4栋配电房': 0,
        '5栋配电房': 0,
        '6栋配电房': 0,
        '7栋配电房': 0,
        '7栋专变电房': 0,
        '899312565id': 0, // 8栋第一个
        '1080388257id': 0, // 8栋第二个
        '9栋配电房': 0,
        '10栋配电房': 0,
        '11栋配电房': 0,
        '12栋配电房': 0,
        '13栋配电房': 0,
        '13栋专变配电房': 0,
        '14栋配电房': 0,
        '15栋配电房': 0,
        '16栋配电房': 0,
        '17栋配电房': 0,
        '18栋配电房': 0,
        '19栋配电房': 0,
        '20栋配电房': 0,
        '21栋配电房': 0,
        '22栋配电房': 0
      },
      floorDatasXIANGBINDefault: {
        '1167926279id': 0, // 东区配电房#1
        '1167921218id': 0, // 东区配电房#2
        '1167922575id': 0, // 西区配电房#1
        '1167929131id': 0 // 西区配电房#2
      }
    }
  },

  computed: {
    floorDatas () {
      let phases = this.$store.getters.phase
      let init = {}
      switch (store.state.route.path.split('/')[1]) {
        case ':0':
          init = this.floorDatasDefault
          break
        case ':1':
          init = this.floorDatasXIANGBINDefault
          break
        case ':2':
          init = this.floorDatasDefault
          break
        case ':3':
          init = this.floorDatasDefault
          break
      }
      if (!phases || !phases.length) {
        return init
      }
      _.forEach(phases, (item) => {
        let data = item.data['psum'] || 0
        if (data >= 1000) {
          data = parseInt(data)
        } else {
          data = filters.toFixed(data)
        }
        if (item.room === '1栋配电房' || item.room === '8栋配电房' || item.room === '东区配电房' || item.room === '西区配电房') {
          init[item.id + 'id'] = data
        } else {
          init[item.room] = data
        }
      })
      return _.clone(init)
    },
    chartOptions () {
      let data = []
      for (let i in this.floorDatas) {
        // console.log(this.floorDatas[i])
        this.floorDatas[i] = parseInt(this.floorDatas[i])
        data.push(this.floorDatas[i])
      }
      let dataList
      switch (store.state.route.path.split('/')[1]) {
        case ':0':
          dataList = ['1栋', '1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '7栋(变电房)', '8栋', '8栋', '9栋', '10栋', '11栋', '12栋', '13栋', '13(变电房)', '14栋', '15栋', '16栋', '17栋', '18栋', '19栋', '20栋', '21栋', '22栋']
          break
        case ':1':
          dataList = ['东区配电房#1', '东区配电房#2', '西区配电房#1', '西区配电房#2']
          break
        case ':2':
          dataList = ['东区配电房', '东区配电房', '西区配电房', '西区配电房']
          break
        case ':3':
          dataList = ['东区配电房', '东区配电房', '西区配电房', '西区配电房']
          break
      }
      let barWidth
      switch (store.state.route.path.split('/')[1]) {
        case ':0':
          barWidth = 10
          break
        case ':1':
          barWidth = 25
          break
        case ':2':
          barWidth = 25
          break
        case ':3':
          barWidth = 25
          break
      }
      return {
        grid: {
          containLabel: true,
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%'
        },
        yAxis: [{
          type: 'value'
        }],
        xAxis: [{
          type: 'category',
          data: dataList
        }],
        series: [{
          name: '进线柜功率',
          type: 'bar',
          stack: '电量',
          barWidth: barWidth,
          data: data,
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#AEAEAE'
              }
            }
          }
        }]
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>
